<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row text-center" >
        <h1>第二届感动新世界投票活动</h1>
        <p> 开始时间:  <span th:text="${title.starttime}"></span> 结束时间: <span th:text="${title.endtime}"></span> 投票总数:<span th:text="${title.size}"></span> </p>
    </div>
    <div class="row">
        <div class="col-sm-4 col-md-4" th:each="tPoors : ${listAll}">
            <div class="thumbnail" >
                <img th:src="${tPoors.url}" alt="..." width="150" height="200">
                <div class="caption">
                    <table>
                        <tr >
                            <input type="hidden" name="id" th:value="${tPoors.id}"/>
                            <td th:text="${tPoors.name}"><h3>3号 李宇春</h3></td>
                        </tr>
                        <tr>
                            <td th:text="${tPoors.psize}" id="aa"><h3>总票数：102</h3></td>
                        </tr>
                        <tr>
                            <td th:text="${tPoors.content}"><p>我爱北京天安门</p></td>
                        </tr>
                        <tr>
                            <td><p><a href="#" class="btn btn-primary" role="button" th:onclick="|javascript:updateT('${tPoors.id}')|">投她一票</a> <a href="#" class="btn btn-default" role="button">Button</a></p></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div>
    <h2><button onclick="showSexDate()" class="btn btn-danger">统计</button></h2>
    <div id="tu1" style="height:400px"></div>
</div>
<div th:include="include::footer"></div>
</body>
<script src="/echarts/echarts.js"></script>
<script>
    function updateT(id){
        $.post("/title/updateT",{id:id},function(p){
            console.log(p);
            if(p.code=='200'){
                window.location.reload();
            }
        },"json");
    }
    // 路径配置
    require.config({
        paths: {
            echarts: '/echarts'
        }
    });
    function showSexDate() {
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar',// 使用柱状图就加载bar模块，按需加载
                'echarts/chart/pie' // 使用柱状图就加载pie模块，按需加载
            ],
            function (ec) {
                var tu1 = ec.init(document.getElementById('tu1'));
                $.post("/poor/dataList", function (p) {
                    console.log(p.name1);
                    console.log(p.list);
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                saveAsImage: {show: true}
                            }
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        yAxis: [
                            {
                                type: 'category',
                                data: p.name1
                            }
                        ],
                        series: [
                            {
                                name: '票数',
                                type: 'bar',
                                stack: '总量',
                                barWidth: 50,
                                itemStyle: {normal: {label: {show: true, position: 'insideRight'}}},
                                data: p.list,
                            }
                        ]
                    };
                    tu1.setOption(option);
                }, "json");
            }
        );
    }
</script>
</html>